<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:250px;border: solid 1px black;float: left;text-align: center;}
        .box img{width:80%}
        .box p{line-height: 20px;height:40px;overflow: hidden;}
    </style>
</head>
<body>
    <div id="cont"></div>
</body>
<script src="data.js"></script>
<script>

    
    // var x = "很好";
    // var str = "今天天气" + x + "，适合学习";
    // var str = "今天天气"+ x +"，适合学习";
    // var str = "今天天气'"+ x +"'，适合学习";
    // var str = '今天天气"'+ x +'"，适合学习';
    // var str = '今天天气\n"'+ x +'"，适合学习';
    // var str = '今天天气<br>"'+ x +'"，适合学习';
    // var str = '今天' + 
    // '天气"'+ x +'"，适合学习';
    // var str = '<div class="box"><img src="'+ src +'" alt=""><p>'+ name +'</p><span>'+ price +'</span></div>';
    // console.log(str);

    
    // 引号隔开，两个++连接，中间写变量


    // ==============

    // 数据数组
    // console.log(data);

    // 解析数组
    var str = "";
    data.forEach(function(val){
        // 字符串拼接
        str += '<div class="box"><img src="'+ val.img +'" alt=""><p>'+ val.proName +'</p><span>'+ val.price +'</span></div>';
    })

    var cont = document.getElementById("cont");
    // 放在页面指定元素中
    cont.innerHTML = str;


</script>
</html>